// 购物车
<template>
  <div>
    <Tips></Tips>
    <!-- 商品列表 -->
    <div class="box">

      <van-checkbox-group v-model="result" :disabled="isEditing">
          <van-checkbox :name="item.id" class="van-checkbox1" v-for="item in cartList" :key="item.goods_id" @click="changeChecked(item)">
            <van-swipe-cell>
              <van-card
              :num="item.number"
              :price="parseFloat(item.retail_price)"
              :title="item.goods_name"
              :thumb="item.list_pic_url"
              >
              </van-card>
              <van-stepper v-model="item.number"  button-size="22" v-show="isEditing" @change="stepperChange(item)"/>
              <template #right>
                <van-button square type="danger" text="删除" @click="delGood(item.product_id)"/>
              </template>
            </van-swipe-cell>
          </van-checkbox>
      </van-checkbox-group>
    </div>

  <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
  <template #tip>
    <span>已选择 {{cartTotal.checkedGoodsCount}} 件商品</span>
    <van-button round :type="isEditing ? 'danger' : 'primary'" size="small" @click="editBut">{{
      isEditing ? '完成编辑' : '点击编辑'}}</van-button>
  </template>
</van-submit-bar>
  </div>
</template>

<script>
import {getCart, changeGoodChecked, changeStepper, deleteGood} from '@/request/api.js'
import Tips from '@/components/Tips.vue'
export default {
  name:'Cart',
  components:{
    Tips
  },
  data(){
    return{
      // 全选
      checked:true,
      result:[],
      cartList:[],
      cartTotal:[],
      isEditing:false
    }
  },
  async created(){
    const res = await getCart()
    if(res.errno == 0)
      this.totalFn(res)
  },
  computed:{
    // 全选
    checkedAll:{
      get(){
        return this.result.length == this.cartList.length
      },
      async set(val){ //val即将要被修改的新值
        let ids_arr = []
        this.cartList.map((item)=>{
          ids_arr.push(item.product_id)
        })
        const res = await changeGoodChecked({
        isChecked:val ? 1:0,
        productIds:ids_arr.join()
      })
      if(res.errno == 0){
        this.totalFn(res)
      }
      }
    }
  },
  methods:{
    async changeChecked(item){
      if(this.isEditing) return
      // 改变商品选中状态
      const res = await changeGoodChecked({
        isChecked:item.checked == 0 ? 1 : 0,
        productIds:item.product_id
      })
      if(res.errno == 0){
        this.totalFn(res)
      }
    },
    totalFn(res){
      this.cartList = res.data.cartList
      this.cartTotal = res.data.cartTotal
       // 清空选中数组
        this.result = []
      this.cartList.map((item)=>{
        if(item.checked == 1){
          this.result.push(item.id)
        }
      })
    },
    editBut(){
      this.isEditing= !this.isEditing
    },
    async stepperChange(item){
      const res = await changeStepper({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      })
      if(res.errno == 0){
        this.totalFn(res)
      }
    },
    async delGood(pid){
      const res = await deleteGood({productIds:pid.toString()})
      if(res.errno == 0){
        this.totalFn(res)
        this.$toast.success('删除成功')
      }
    },
    onSubmit(){
      this.$toast('该功能暂未开放！')
    }
  }
}
</script lang="less" scoped>

<style lang="less" scoped>
/deep/ .van-checkbox__label{
  flex: 1;
}
.box{
  padding-bottom: 1.5rem;
}
.van-checkbox1{
  background-color: #fff;
  padding: 0.1rem .15rem;
  border-bottom:  1px solid #ccc;
}
.van-card{

}
.van-submit-bar{
  bottom: .5rem;
  border-bottom:  1px solid #ccc;
}
.van-stepper{
  text-align: right;
  margin-right: .1rem;
  
}
.van-button--square{
  height: 100%;
}
.van-submit-bar__tip{
  font-size: .15rem;
}
.van-button--small{
  margin-left: 1.5rem;
}
.van-card__title{
  font-size: .16rem;
}
</style>